import { THEME_MODE_ATTR, THEME_MODE_KEY, Theme } from "@/constant/theme";
import { defineStore } from "pinia";

interface SystemState {
  theme?: Theme;
}

export const useSystemStore = defineStore({
  id: "system",
  state: (): SystemState => {
    const theme = localStorage.getItem(THEME_MODE_KEY) as Theme;
    document.body.setAttribute(THEME_MODE_ATTR, theme);

    return {
      theme,
    };
  },
  getters: {
    getTheme(state) {
      return state.theme ?? Theme.LIGHT;
    },
  },
  actions: {
    setTheme(theme: Theme) {
      this.theme = theme;
      document.body.setAttribute(THEME_MODE_ATTR, theme);
      localStorage.setItem(THEME_MODE_KEY, theme);
    },
  },
});
